<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册界面</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }

        .register-container {
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        form h2 {
            text-align: center;
            color: #333;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #666;
        }

        .form-group input[type="text"],
        .form-group input[type="password"],
        .form-group input[type="number"],
        .form-group input[type="email"],
        .form-group input[type="nickname"],
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .gender-group {
            display: flex;
            align-items: center;
        }

        .radio-inline {
            margin-right: 10px;
        }

        .radio-inline label {
            margin-bottom: 0;
        }

        .btn {
            width: 100%;
            padding: 10px;
            border: none;
            background-color: #5cb85c;
            color: white;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        .btn:hover {
            background-color: #4cae4c;
        }
    </style>
</head>
<body>
    <div class="register-container">
        <form id="registerForm">
            <h2>注册</h2>
            <div class="form-group">
                <label for="userId">账号ID:</label>
                <input type="text" id="userId" name="userId" required>
            </div>
            <div class="form-group">
                <label for="password">账号密码:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group gender-group">
                <label>性别:</label>
                <label class="radio-inline">
                    <input type="radio" id="male" name="gender" value="male">
                    男
                </label>
                <label class="radio-inline">
                    <input type="radio" id="female" name="gender" value="female">
                    女
                </label>
            </div>
            <div class="form-group">
                <label for="age">年龄:</label>
                <input type="number" id="age" name="age" required>
            </div>
            <div class="form-group">
                <label for="email">邮箱:</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="nickname">昵称:</label>
                <input type="text" id="nickname" name="nickname" required>
            </div>
            <div class="form-group">
                <label for="signature">个人签名:</label>
                <textarea id="signature" name="signature" rows="4" required></textarea>
            </div>
            <button type="submit" class="btn" id="registerButton">注册</button>
        </form>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const registerButton = document.getElementById('registerButton');
            const userid = document.getElementById('userId');
            const password = document.getElementById('password');
            const age = document.getElementById('age');
            const email = document.getElementById('email');
            const nickname = document.getElementById('nickname');
            const signature = document.getElementById('signature');

            registerButton.addEventListener('click', function(event) {
                event.preventDefault(); // 阻止表单默认提交行为

                // 每次点击时重新获取选中的性别
                var genderRadios = document.getElementsByName('gender');
                var selectedGender;
                for (var i = 0; i < genderRadios.length; i++) {
                    if (genderRadios[i].checked) {
                        selectedGender = genderRadios[i].value;
                        break; // 一旦找到选中的按钮，就跳出循环
                    }
                }

                // 确保selectedGender变量已经被赋值
                if (selectedGender) {
                    console.log('选择的性别是：', selectedGender);
                    if(!userid.value||!password.value||!age.value||!email.value||!selectedGender||!nickname.value||!signature.value)
                    {
                        alert("请输入所有信息！");
                        return;
                    }
                    // 如果输入框都有内容，则创建FormData对象，用于构建发送到服务器的数据
                    const formData = new FormData();
                    formData.append('userid', userid.value);
                    formData.append('password', password.value);
                    formData.append('gender', selectedGender);
                    formData.append('age', age.value);
                    formData.append('email', email.value);
                    formData.append('nickname', nickname.value);
                    formData.append('signature', signature.value);

                    // 使用fetch API发送POST请求
                    fetch('/regist', { // 替换为你的服务器端点
                        method: 'POST',
                        body: formData
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json(); // 假设服务器返回JSON格式的响应
                    })
                    .then(data => {
                        console.log('Success:', data);
                        if(data.status=="true")
                        {
                            alert("注册成功！自动前往登录页面...");
                            window.location.href="/";
                        }
                        else
                        {
                            alert("注册失败！该账号已经注册！");
                        }
                        // 处理登录成功的逻辑，例如跳转到另一个页面
                        
                    })
                    .catch((error) => {
                        console.error('Error:', error);
                        // 处理登录失败的逻辑，例如显示错误消息
                    });
                } else {
                    console.log('没有选择性别');
                    // 可以在这里处理没有选择性别的情况，例如显示一个警告
                }
            });
        });
    </script>
</body>
</html>